import Vue from "vue"
import Vuex from 'vuex'

Vue.use(Vuex)

import { localStorageTodos, filters } from '../assets/loaclStorageTodoMvc';


const state = {
    todos: localStorageTodos.get(),
    allCkx: false
}

const mutations = {
    onAddTodo(state, title) {
        state.todos.push({
            id: state.todos.length ? state.todos[state.todos.length - 1].id + 1 : 1,
            title,
            completed: false
        })
    },
    removeTodo(state, todo) {
        state.todos.splice(state.todos.indexOf(todo), 1)
    },
    cancelTodo(state, { newVal, oldVal }) {
        state.todos.splice(state.todos.indexOf(newVal), 1, oldVal)
    },
    clearComleted(state) {
        state.todos = filters.unfinished(state.todos)
    },
    onClkAllCkx(state, data) {
        state.todos = state.todos.map(v => {
            return { ...v, completed: data }
        })
    }
}

const actions = {
    onAddTodo({ commit }, todo) {
        commit("onAddTodo", todo)
    },
    onClkAllCkx({ commit }, data) {
        commit("onClkAllCkx", data)
    }
}

const getters = {

}

const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

export default store